<div [@routerTransition]>
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>外协申请</span>
                </h3>
                <span class="m-section__sub">
                 外协申请情况查询及管理
              </span>
            </div>
            <div class="col text-right mt-3 mt-md-0">
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="row">
            <div class="col-xl-4">

                <div class="m-portlet m-portlet--full-height">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    交付情况
                                </h3>
                            </div>
                        </div>
                        <div class="m-portlet__head-tools">
                            <ul class="m-portlet__nav">
                                <li aria-expanded="true" class="m-portlet__nav-item m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" m-dropdown-toggle="hover">
                                    <a class="m-portlet__nav-link m-portlet__nav-link--icon m-portlet__nav-link--icon-xl" href="#" ng-reflect-href="#">
                                        <i class="fa fa-genderless m--font-brand"></i>
                                    </a>
                                    <div class="m-dropdown__wrapper" style="z-index: 101;">
                                        <span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust" style="left: auto; right: 17px;"></span>
                                        <div class="m-dropdown__inner">
                                            <div class="m-dropdown__body">
                                                <div class="m-dropdown__content">
                                                    <ul class="m-nav">
                                                        <li class="m-nav__item">
                                                            <a class="m-nav__link" href="" ng-reflect-href="">
                                                                <i class="m-nav__link-icon flaticon-share"></i>
                                                                <span class="m-nav__link-text">
                                                                            Activity
                                                                        </span>
                                                            </a>
                                                        </li>
                                                        <li class="m-nav__item">
                                                            <a class="m-nav__link" href="" ng-reflect-href="">
                                                                <i class="m-nav__link-icon flaticon-chat-1"></i>
                                                                <span class="m-nav__link-text">
                                                                            Messages
                                                                        </span>
                                                            </a>
                                                        </li>
                                                        <li class="m-nav__item">
                                                            <a class="m-nav__link" href="" ng-reflect-href="">
                                                                <i class="m-nav__link-icon flaticon-info"></i>
                                                                <span class="m-nav__link-text">
                                                                            FAQ
                                                                        </span>
                                                            </a>
                                                        </li>
                                                        <li class="m-nav__item">
                                                            <a class="m-nav__link" href="" ng-reflect-href="">
                                                                <i class="m-nav__link-icon flaticon-lifebuoy"></i>
                                                                <span class="m-nav__link-text">
                                                                            Support
                                                                        </span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div class="m-widget6">
                            <div class="m-widget6__head">
                                <div class="m-widget6__item">
                                    <span class="m-widget6__caption">
                                                时间
                                            </span>
                                    <span class="m-widget6__caption">
                                                数量
                                            </span>
                                    <span class="m-widget6__caption m--align-right">
                                                图号
                                            </span>
                                </div>
                            </div>
                            <div class="m-widget6__body">
                                <div class="m-widget6__item">
                                    <span class="m-widget6__text">
                                                16/13/17
                                            </span>
                                    <span class="m-widget6__text">
                                                67
                                            </span>
                                    <span class="m-widget6__text m--align-right m--font-boldest m--font-brand">
                                                $14,740
                                            </span>
                                </div>
                                <div class="m-widget6__item">
                                    <span class="m-widget6__text">
                                                02/28/17
                                            </span>
                                    <span class="m-widget6__text">
                                                120
                                            </span>
                                    <span class="m-widget6__text m--align-right m--font-boldest m--font-brand">
                                                $11,002
                                            </span>
                                </div>
                                <div class="m-widget6__item">
                                    <span class="m-widget6__text">
                                                03/06/17
                                            </span>
                                    <span class="m-widget6__text">
                                                32
                                            </span>
                                    <span class="m-widget6__text m--align-right m--font-boldest m--font-brand">
                                                $10,900
                                            </span>
                                </div>
                                <div class="m-widget6__item">
                                    <span class="m-widget6__text">
                                                10/21/17
                                            </span>
                                    <span class="m-widget6__text">
                                                130
                                            </span>
                                    <span class="m-widget6__text m--align-right m--font-boldest m--font-brand">
                                                $14,740
                                            </span>
                                </div>
                                <div class="m-widget6__item">
                                    <span class="m-widget6__text">
                                                01/02/17
                                            </span>
                                    <span class="m-widget6__text">
                                                5
                                            </span>
                                    <span class="m-widget6__text m--align-right m--font-boldest m--font-brand">
                                                $18,540
                                            </span>
                                </div>
                                <div class="m-widget6__item">
                                    <span class="m-widget6__text">
                                                03/06/17
                                            </span>
                                    <span class="m-widget6__text">
                                                32
                                            </span>
                                    <span class="m-widget6__text m--align-right m--font-boldest m--font-brand">
                                                $10,900
                                            </span>
                                </div>
                                <div class="m-widget6__item">
                                    <span class="m-widget6__text">
                                                12/31/17
                                            </span>
                                    <span class="m-widget6__text">
                                                201
                                            </span>
                                    <span class="m-widget6__text m--align-right m--font-boldest m--font-brand">
                                                $25,609
                                            </span>
                                </div>
                            </div>
                            <div class="m-widget6__foot">
                                <div class="m-widget6__action m--align-right">
                                    <button class="btn m-btn--pill btn-secondary m-btn m-btn--hover-brand m-btn--custom" type="button">
                                                导出
                                            </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-xl-8">

                <div class="m-portlet m-portlet--full-height">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    我的外协申请
                                </h3>
                            </div>
                        </div>
                        <div class="m-portlet__head-tools">
                            <div class="input-group">
                                <input class="form-control" placeholder="Search for..." type="text">
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="button">
                                                Go!
                                     </button>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div class="tab-content">
                            <div class="tab-pane active" id="m_widget4_tab1_content">
                                <div class="m-widget4 m-widget4--progress">
                                    <div class="m-widget4__item">

                                        <div class="m-widget4__img m-widget4__img--pic">
                                            <img alt="" src="./assets/app/media/img/users/100_14.jpg">
                                        </div>
                                        <div class="m-widget4__info">
                                            <span class="m-widget4__title">
                                                       型号指挥审批 
                                                       <span class="m-badge m-badge--brand m-badge--wide"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">有待</font></font></span>
                                            </span>
                                            <br>
                                            <span class="m-widget4__sub">
                                                李总   
                                                    </span>
                                        </div>
                                        <div class="m-widget4__progress">
                                            <div class="m-widget4__progress-wrapper">
                                                <span class="m-widget17__progress-number">
                                                           adddda,asdsad,adsad,asdasdd,asdasd等5项
                                                        </span>
                                                <span class="m-widget17__progress-label">
                                                    2019-04-05
                                                        </span>
                                                <div class="progress m-progress--sm">
                                                    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar" role="progressbar" style="width: 50%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="m-widget4__ext">
                                            <div aria-label="..." class="btn-group m-btn-group m-btn-group--pill" role="group">
                                                <button class="m-btn m-btn--hover-brand m-btn--pill btn btn-sm btn-secondary" type="button">
                                                            详情
                                                        </button>
                                                <button class="m-btn m-btn--hover-brand m-btn--pill btn btn-sm btn-secondary" type="button">
                                                            删除
                                                        </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-widget4__item">
                                        <div class="m-widget4__img m-widget4__img--pic">
                                            <img alt="" src="./assets/app/media/img/users/100_14.jpg">
                                        </div>
                                        <div class="m-widget4__info">
                                            <span class="m-widget4__title">
                                                        Milano Esco
                                                    </span>
                                            <br>
                                            <span class="m-widget4__sub">
                                                        Product Designer, Apple Inc
                                                    </span>
                                        </div>
                                        <div class="m-widget4__progress">
                                            <div class="m-widget4__progress-wrapper">
                                                <span class="m-widget17__progress-number">
                                                            33%
                                                        </span>
                                                <span class="m-widget17__progress-label">
                                                            Paris
                                                        </span>
                                                <div class="progress m-progress--sm">
                                                    <div aria-valuemax="33" aria-valuemin="0" aria-valuenow="45" class="progress-bar bg-success" role="progressbar" style="width: 33%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="m-widget4__ext">
                                            <a class="m-btn m-btn--hover-brand m-btn--pill btn btn-sm btn-secondary" href="#" ng-reflect-href="#">
                                                        详情
                                                    </a>
                                        </div>
                                    </div>
                                    <div class="m-widget4__item">
                                        <div class="m-widget4__img m-widget4__img--pic">
                                            <img alt="" src="./assets/app/media/img/users/100_11.jpg">
                                        </div>
                                        <div class="m-widget4__info">
                                            <span class="m-widget4__title">
                                                        Nick Bold
                                                    </span>
                                            <br>
                                            <span class="m-widget4__sub">
                                                        Web Developer, Facebook Inc
                                                    </span>
                                        </div>
                                        <div class="m-widget4__progress">
                                            <div class="m-widget4__progress-wrapper">
                                                <span class="m-widget17__progress-number">
                                                            13%
                                                        </span>
                                                <span class="m-widget17__progress-label">
                                                            London
                                                        </span>
                                                <div class="progress m-progress--sm">
                                                    <div aria-valuemax="13" aria-valuemin="0" aria-valuenow="65" class="progress-bar bg-brand" role="progressbar" style="width: 13%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="m-widget4__ext">
                                            <a class="m-btn m-btn--hover-brand m-btn--pill btn btn-sm btn-secondary" href="#" ng-reflect-href="#">
                                                        Follow
                                                    </a>
                                        </div>
                                    </div>
                                    <div class="m-widget4__item">
                                        <div class="m-widget4__img m-widget4__img--pic">
                                            <img alt="" src="./assets/app/media/img/users/100_1.jpg">
                                        </div>
                                        <div class="m-widget4__info">
                                            <span class="m-widget4__title">
                                                        Wiltor Delton
                                                    </span>
                                            <br>
                                            <span class="m-widget4__sub">
                                                        Project Manager, Amazon Inc
                                                    </span>
                                        </div>
                                        <div class="m-widget4__progress">
                                            <div class="m-widget4__progress-wrapper">
                                                <span class="m-widget17__progress-number">
                                                            93%
                                                        </span>
                                                <span class="m-widget17__progress-label">
                                                            New York
                                                        </span>
                                                <div class="progress m-progress--sm">
                                                    <div aria-valuemax="93" aria-valuemin="0" aria-valuenow="25" class="progress-bar bg-danger" role="progressbar" style="width: 93%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="m-widget4__ext">
                                            <a class="m-btn m-btn--hover-brand m-btn--pill btn btn-sm btn-secondary" href="#" ng-reflect-href="#">
                                                        Follow
                                                    </a>
                                        </div>
                                    </div>
                                    <div class="m-widget4__item">
                                        <div class="m-widget4__img m-widget4__img--pic">
                                            <img alt="" src="./assets/app/media/img/users/100_6.jpg">
                                        </div>
                                        <div class="m-widget4__info">
                                            <span class="m-widget4__title">
                                                        Sam Stone
                                                    </span>
                                            <br>
                                            <span class="m-widget4__sub">
                                                        Project Manager, Kilpo Inc
                                                    </span>
                                        </div>
                                        <div class="m-widget4__progress">
                                            <div class="m-widget4__progress-wrapper">
                                                <span class="m-widget17__progress-number">
                                                            50%
                                                        </span>
                                                <span class="m-widget17__progress-label">
                                                            New York
                                                        </span>
                                                <div class="progress m-progress--sm">
                                                    <div aria-valuemax="50" aria-valuemin="0" aria-valuenow="50" class="progress-bar bg-warning" role="progressbar" style="width: 50%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="m-widget4__ext">
                                            <a class="m-btn m-btn--hover-brand m-btn--pill btn btn-sm btn-secondary" href="#" ng-reflect-href="#">
                                                        Follow
                                                    </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="m_widget4_tab2_content"></div>
                            <div class="tab-pane" id="m_widget4_tab3_content"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <createOrEditTaskModal #createOrEditTaskModal (modalSave)="getTasks()"></createOrEditTaskModal>
    <editUserPermissionsModal #editUserPermissionsModal></editUserPermissionsModal>
</div>